import React, {memo, useRef, useState} from 'react';

import "./index.css";
import {useSelector} from "react-redux";

export default memo(function ExperimentName() {
  const {data} = useSelector(state => ({
    data: state.dataReducer.data
  }));
  const [showNameBox, setShowNameBox] = useState(false);
  const name = useRef();

  function showFullName() {
    if (name.current.scrollWidth <= name.current.clientWidth) {
      return;
    }
    setShowNameBox(true);
  }

  return (
    <header className="nameHeaderComponent">
      <div/>
      <div ref={name}
           onMouseOver={showFullName}
           onMouseLeave={() => setShowNameBox(false)}
      >{data.experimentName}</div>
      {
        showNameBox
          ? <div>{data.experimentName}</div>
          : null
      }
    </header>
  );
});